<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>跟读目录</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <style type="text/css">
        .vueApp {
            overflow: hidden;
        }
        .result-box {
            position: relative;
            overflow: hidden;
            height: 155px;
            background-image: url(../../image/course/question_menus_bg.png);
            background-size: 100% 155px;
            background-repeat: no-repeat;
        }
        .bottom-shape {
            /*position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 10px;
            background-color: #fff;
            border-radius: 10px 10px 0px 0px;*/
        }
        .score-content {
            position: absolute;
            top: 30px;
            left: 50%;
            width: 275px;
            height: 190px;
            transform: translateX(-50%);
        }
        .score-content .text {
            padding-top: 16px;
        }
        .score-content .text img {
            width: 6px;
            height: 6px;
        }
        .score-content .text span {
            color: #222224;
            font-size: 14px;
            margin: 0 6px;
        }
        .score-content .score {
            margin-top: 12px;
            font-size: 45px;
            text-align: center;
            font-weight: bolder;
            line-height: 49px;
        }
        .item {
            margin: 15px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow:0px 4px 10px 0px rgba(0,135,214,0.37);
            height: 60px;
            padding: 0 15px;
        }
        .item .audio {
            width: 25px;
            height: 25px;
        }
        .name {
            margin: 0 10px;
            font-weight: bolder;
        }
        .right-info img {
            width: 17px;
            height: 16px;
        }
        .right-info p {
            color: #BFBFBF;
            margin-right: 8px;
        }
        .right-info p.score {
            color: #FD9B43;
            font-size: 14px;
        }
        .right-info p.score span {
            font-size: 20px;
            font-weight: bolder;
        }
    </style>
</head>
<body class="blue-bg">
    <div class="vueApp" v-cloak>
        <div v-if="info.scoreValue" class="result-box blue-bg">
            <div class="score-content">
                <p class="text" data-flex="main:center cross:center">
                    <img src="../../image/course/read_icon.png" alt="">
                    <span>最终得分</span>
                    <img src="../../image/course/read_icon.png" alt="">
                </p>
                <p class="orange score">{{info.scoreValue}}</p>
            </div>            
            <div class="bottom-shape"></div>
        </div>
        <div class="item" v-for="item,index in listData" @click="handleItem(item)" data-flex="box:justify cross:center">
            <img class="audio" v-if="item.isAllOver == 1" src="../../image/course/record.png" alt="">
            <img class="audio" v-else src="../../image/course/no_record.png" alt="">
            <p class="one-line name">{{item.catalogName}}</p>
            <div class="right-info" data-flex="cross:center">
                <p v-if="item.isAllOver" class="score">得分：<span>{{item.scoreValue}}</span></p>
                <p v-else>未完成</p>
                <img src="../../image/course/icon_right.png" alt="">
            </div>
        </div>
        <carousel type="4" bottom="15" notbg="true"></carousel>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/component/carousel.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm;
    var pageParam = {};
    apiready = function(){
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
    };

    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                info: pageParam.pageMsg || {},
                listData: pageParam.listData || []
            }
        });
        load();
        getPageData();
    }

    function load() {
        fnAddHeaderRefreshingEvent(function() { //设置下拉刷新
            getPageData();
        });
    }

    // 获取页面数据
    function getPageData() {
        var url = 'catalog/findSubsectCatalogList';
        var params = {
            catalogId: pageParam.id,
            id: '',
            queryStudentId: pageParam.custId || USER.Get('custId')
        };
        var callback = function(data) {
            data = data.listData[0];
            data.scoreValue = Math.round(Number(data.scoreValue));
            vm.info = data;
            var listData = data.childCatalogList;
            for(var i = 0; i < listData.length; i ++) {
                var item = listData[i];
                item.scoreValue = Math.round(Number(item.scoreValue));
            }
            vm.listData = listData;
            api.refreshHeaderLoadDone();
            // status 为200时,只返回data
        };
        POST(url, params, callback);
    }

    // 点击item
    function handleItem(item) {
        if(pageParam.report != 1) {
            fnOpenPublicWin(item.catalogName, 'course1/read_detail', {
                isBtn: item.scoreValue,
                btnName: '再做一次',
                headerFn: 'handleDoAgin',
                id: item.id,
                code: item.questionTypeCode,
                score: item.scoreValue
            });
        }
    }
</script>
</html>